<template>
  <div class="order">
    <!-- order-bar -->
    <view class="order-bar">
      <block v-for="(item, index) of orderBar" :key="item.id">
        <view @tap="changeTab(index)" class="bar-item" :class="{ 'active': index === tabIndex }">{{item.title}}</view>
      </block>
    </view>

    <!-- list -->
    <scroll-view scroll-y class="order-list">
      <block v-for="item of orderList" :key="item.order_id">
        <view class="order-item" @tap="toGoodsDetail">

          <view class="order-info">
            <image
              src="https://images.gitee.com/uploads/79/854479_lafen.png!avatar100?1547005487"
              mode="aspectFill"
              lazy-load="false">
            </image>
            <view class="order-detail">
              <view class="order-title ellipsis-2">啊啊啊~参一生参不透这道难，已经为你写了信又被我丢到海里, 这一路上走走停停</view>
              <view class="order-price">
                <view class="price">￥{{item.order_price}}</view>
                <view class="num">×1</view>
              </view>
            </view>
          </view>

          <view class="order-count">共 1 件商品 总计：￥4099 (含运费0.00)</view>
          <view class="order-opt">
            <view class="order-num">订单号：{{item.order_number}}</view>
            <button @tap.stop="toPay" class="order-pay order-payed" disabled size="mini" v-if="item.pay_status=='1'">已支付</button>
            <button @tap.stop="toPay" class="order-pay" size="mini" v-else>支付</button>
          </view>
          

        </view>
      </block>
    </scroll-view>
  </div>
</template>

<script>
import { orderAll } from "@/api";
export default {
  data () {
    return {
      orderBar: [
        { title: '全部', id: 0, type: 1 },
        { title: '待付款', id: 1, type: 2 },
        { title: '已付款', id: 2, type: 3 },
        { title: '退款/退货', id: 3, type: 4 }
      ],
      tabIndex: 0,
      orderList: []
    }
  },
  onLoad (options) {
    this.tabIndex = +options.id || 0;
  },
  mounted () {
    let type = this.orderBar[this.tabIndex].type
    this.initPage(type)
  },
  methods: {
    // 切换菜单
    changeTab (index) {
      this.tabIndex = index
      let type = this.orderBar[index].type
      this.initPage(type)
    },
    // 去支付
    toPay () {
      console.log('pay')
    },
    // 点击列表项
    toGoodsDetail () {
      console.log('item')
    },
    // 初始化页面
    initPage (type) {
      orderAll({ type }).then(res => {
        console.log('order', res)
        this.orderList = res.message.orders
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$mainColor: #ff2d49;
.order {
  background-color: #f4f4f4;
}
.bar-item.active {
  color: $mainColor;
  border-bottom: 10rpx solid $mainColor;
}
.ellipsis-2 {
  // 两行换行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  // 兼容
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  line-clamp: 2;
}
.order-bar {
  display: flex;
  justify-content: space-around;
  font-size: 28rpx;
  color: #666;
  background-color: #fff;
  box-shadow: 0 10rpx 10rpx #ddd;
  .bar-item {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
  }
}

.order-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 90rpx;
  bottom: 0;
  z-index: -1;
  background-color: #f4f4f4;
  .order-item {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx;
    font-size: 24rpx;
    box-shadow: 0 5rpx 5rpx #eee;
    .order-info {
      display: flex;
      image {
        width: 200rpx;
        height: 200rpx;
      }
      .order-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10rpx 0;
        font-size: 28rpx;
        color: #333;
        .order-price {
          display: flex;
          justify-content: space-between;
          .price {
            font-size: 32rpx;
            color: $mainColor;
          }
          .num {
            font-size: 24rpx;
          }
        }
      }

    }
    .order-count {
      padding: 20rpx 0;
      color: #aaa;
      text-align: right;
      border-top: 1rpx solid #f1f1f1;
      border-bottom: 1rpx solid #f1f1f1;
    }
    .order-opt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0 0;
      color: #aaa;
      .order-num {
        flex: 1;
      }
      .order-pay {
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: $mainColor;
        background-color: #fcfcfc;
      }
      .order-payed {
        color: #ccc;
      }
    }
  }
}
</style>
